<template>
  <div>
    <Divider class="component-blue" orientation="left">扩展图标XIcon</Divider>
    <div style="font-size: 12px; margin-bottom: 10px">Ionicons：</div>
    <XIcon type="md-ionic" size="26" />
    <div style="font-size: 12px; margin: 10px 0">iconfont：</div>
    <XIcon type="iconfont icon-github" size="26" />
    <div style="font-size: 12px; margin: 10px 0">URL：</div>
    <XIcon type="https://ooo.0o0.ooo/2019/04/28/5cc5a71a6e3b6.png" size="30" />
    <div style="font-size: 12px; margin: 10px 0">Base64：</div>
    <XIcon :type="base64" size="26" />
    <h3 class="component-article">基础用法</h3>
    基本用法，已全局挂载直接使用即可，兼容Ionicons、iconfont、图片链接URL、Base64。<code
      >{{ code }}</code
    >
    <h3 class="component-article">props</h3>
    <Table
      :columns="props"
      :data="data1"
      border
      size="small"
      width="1000"
    ></Table>
  </div>
</template>
<script>
import { props, events, methods } from "./columns";
export default {
  components: {},
  data() {
    return {
      code: '<XIcon type="图标名/URL/Base64" />',
      base64:
        "",
      props: props,
      events: events,
      methods: methods,
      data1: [
        {
          name: "type",
          desc: "Ionicons或iconfont图标的名称/图片链接URL/Base64",
          type: "String",
          value: "-",
        },
        {
          name: "size",
          desc: "图标的大小，单位是 px",
          type: "Number | String",
          value: "-",
        },
        {
          name: "color",
          desc: "图标的颜色（当传入图片时无效）",
          type: "String",
          value: "-",
        },
      ],
    };
  },
  methods: {},
  mounted() {},
};
</script>